<template>
  <view class="app-container">
    <div class="steps-container">
      <image src="/static/icons/liuchengwancheng.svg" mode=""></image>
      <h3 class="title">提现申请成功</h3>
      <u-steps current="1">
        <u-steps-item title="扣款成功">
          <u-icon name="checkmark-circle-fill" color="#00B6FC" slot="icon"></u-icon>
        </u-steps-item>
        <u-steps-item title="银行处理中">
          <span class="slot-icon" slot="icon"></span>
        </u-steps-item>
        <u-steps-item title="提现成功">
          <span class="slot-icon2" slot="icon"></span>
        </u-steps-item>
      </u-steps>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  onNavigationBarButtonTap(btn) {
    switch (btn.index) {
      case 0:
        uni.switchTab({
          url: '/pages/index/index'
        })
        break
    }
  }
}
</script>

<style lang="scss">
.steps-container {
  image {
    display: block;
    width: 45px;
    height: 45px;
    margin: 16px auto;
  }
  .title {
    text-align: center;
    margin: 0 0 40px 0;
  }
  .u-steps-item__wrapper--row {
    width: 17px;
    height: 17px;
    background-color: #f5f6f7;
  }
  .slot-icon {
    display: block;
    width: 17px;
    height: 17px;
    background-color: #00b6fc;
    border-radius: 50%;
    position: relative;
    &:after {
      position: absolute;
      content: '';
      width: 11px;
      height: 11px;
      left: 3px;
      top: 3px;
      border-radius: 50%;
      background-color: #fff;
    }
  }
  .slot-icon2 {
    display: block;
    width: 17px;
    height: 17px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #afafaf;
  }
}
</style>
